<template>
<div>
 <div class="search"  v-if="!(singers&&hotlist&&historylist&&hotlist)">
    <!-- 搜索头部 -->
    <div class="serchhead" v-if="showindex==1?true:false">
      <span><van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/></span>
    </div>
    <!-- 搜索输入 -->
    <div class="searchframe">
    <div class="searchbar">
     <van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/>
    </div>
    <span class="quxiao"  v-if="showindex>1?true:false" @click="showindex=1"> <van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/></span>
    </div>
    <!-- 搜索预制内容 -->
    <div class="beforesearch"  v-if="showindex==1?true:false">
      <div class="daytitle" v-if="singers">
        <span><van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/></span>
       
      </div>
      <!-- 歌手列表 -->
      <div class="singerlist" >
       <van-skeleton title avatar />
        <van-skeleton v-for="item in singers"  :row="1" :row-width='100'  :avatar-size='"100"'/>
        
      </div>
      <!-- 热门搜索 -->
      <div class="hotlist">
        <div class="daytitle" v-if="singers">
          <span><van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/></span>
        </div>
        <div class="content">
          <ul>
            
            <van-skeleton v-for="item in hotlist"  :row="1" :row-width='100'  :avatar-size='"100"'/>
          </ul>
        </div>
      </div>
      <!-- 歌单推荐 -->
      <div class="gedanrecommand">
          <div class="daytitle">
          <span><van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/></span>
        </div>
       <div class="recommandlist">
         <div class="model">
           <span class="english"><van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/></span>
           <span class="english"><van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/></span>
           <span class="zhongwen"> <span class="iconfont icon-hashjinghao">电子</span></span>

         </div>
          <div class="model">
         <span class="english purple"><van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/></span>
           <span class="english purple"><van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/></span>
           <span class="zhongwen"> <span class="iconfont icon-hashjinghao"><van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/></span></span>

         </div>
          <div class="model">
           
           <span class="english pink"><van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/></span>
           <span class="zhongwen"> <span class="iconfont icon-hashjinghao"><van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/></span></span>

         </div>
          <div class="model">
           
           <span class="english orange"><van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/></span>
           <span class="zhongwen"> <span class="iconfont icon-hashjinghao"><van-skeleton  :row="1" :row-width='100'  :avatar-size='"100"'/></span></span>

         </div>
       
         
       </div>
      </div>
    </div>
    <!-- 搜索历史 -->
    <div class="history" v-if="showindex==2?true:false">
       <div class="daytitle" v-if="singers">
        <span搜索历史</span>
      </div>
      <div class="historylist">
        <ul>
          <li  v-for="item in historylist" @click="tosearch(item)">{{item}}</li>
          
        </ul>
        <span class="clear" @click="deletehistory">清空搜索历史</span>
      </div>
      
    </div>
    <!-- 相似搜索 -->
    <div class="similar" v-if="showindex==3?true:false">
     
      <div class="historylist">
        <ul>
          <li v-for="item in suggestlist" @click="tosearch(item.name)">{{item.name}}</li>
          
        </ul>
      
      </div>

    </div>
    <!-- 搜索结果 -->
    <div class="result" v-if="showindex==4?true:false">
        <div class="daytitle" v-if="artistlist">
        <span>音乐人</span>
        <!-- <span class="iconfont icon-right_x"></span> -->
      </div>
        <div class="singerlist" >
        <div class="model" v-for="item in artistlist">
          <div class="modeltop">
            <img :src="item.picUrl" alt="" />
          </div>
          <div class="modelbottom">
            <span>
              {{ item.name }}
            </span>
          </div>
        </div>
      </div>
       <div class="daytitle" v-if="songresult">
        <span>歌曲</span>
        <!-- <span class="iconfont icon-right_x"></span> -->
      </div>
       <div class="songlist">
         <music :id="item.id" class="musicitem" v-for="item in songresult"></music>
        
       </div>
       <div class="songlist">
         <music :id="item.id" class="musicitem" v-for="item in alllist"></music>
        
       </div>
    </div>
  </div>
  <div class="search" v-if="(singers&&hotlist&&historylist&&hotlist)">
    <!-- 搜索头部 -->
    <div class="serchhead" v-if="showindex==1?true:false">
      <span>搜索</span>
    </div>
    <!-- 搜索输入 -->
    <div class="searchframe">
    <div class="searchbar">
      <span class="iconfont icon-sousuo"></span>
      
      <input ref="input" @input="oninput" @blur="blur" @keyup.enter="saveSwarchValue" @click="clikinput" v-model="searchValue" type="text" placeholder="搜索歌曲/专辑/歌单/音乐人" />
      <i class="iconfont icon-shanchu" v-if="showindex>2?true:false" @click="searchValue=''"></i>
    </div>
    <span class="quxiao"  v-if="showindex>1?true:false" @click="showindex=1"> 取消</span>
    </div>
    <!-- 搜索预制内容 -->
    <div class="beforesearch"  v-if="showindex==1?true:false">
      <div class="daytitle" v-if="singers">
        <span>推荐音乐人</span>
        <span class="iconfont icon-right_x"></span>
      </div>
      <!-- 歌手列表 -->
      <div class="singerlist" >
        <div class="model" v-for="item in singers" @click="$router.push(`/singer?id=${item.id}`)">
          <div class="modeltop">
            <img :src="item.img1v1Url" alt="" />
          </div>
          <div class="modelbottom">
            <span>
              {{ item.name }}
            </span>
          </div>
        </div>
      </div>
      <!-- 热门搜索 -->
      <div class="hotlist">
        <div class="daytitle" v-if="singers">
          <span>热门搜索</span>
        </div>
        <div class="content">
          <ul>
            <li v-for="item in hotlist" @click="tosearch(item.first)">
              <span class="iconfont icon-hashjinghao"></span>
              <span>{{item.first}}</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 歌单推荐 -->
      <div class="gedanrecommand">
          <div class="daytitle">
          <span>流派歌单推荐</span>
        </div>
       <div class="recommandlist">
         <div class="model">
           <span class="english">ELEC</span>
           <span class="english">TRONIC</span>
           <span class="zhongwen"> <span class="iconfont icon-hashjinghao">电子</span></span>

         </div>
          <div class="model">
         <span class="english purple">SOUND</span>
           <span class="english purple">TRACK</span>
           <span class="zhongwen"> <span class="iconfont icon-hashjinghao">电影原声</span></span>

         </div>
          <div class="model">
           
           <span class="english pink">POP</span>
           <span class="zhongwen"> <span class="iconfont icon-hashjinghao">流行</span></span>

         </div>
          <div class="model">
           
           <span class="english orange">RAP</span>
           <span class="zhongwen"> <span class="iconfont icon-hashjinghao">说唱</span></span>

         </div>
       
         
       </div>
      </div>
    </div>
    <!-- 搜索历史 -->
    <div class="history" v-if="showindex==2?true:false">
       <div class="daytitle" v-if="singers">
        <span搜索历史</span>
      </div>
      <div class="historylist">
        <ul>
          <li  v-for="item in historylist" @click="tosearch(item)">{{item}}</li>
          
        </ul>
        <span class="clear" @click="deletehistory">清空搜索历史</span>
      </div>
      
    </div>
    <!-- 相似搜索 -->
    <div class="similar" v-if="showindex==3?true:false">
     
      <div class="historylist">
        <ul>
          <li v-for="item in suggestlist" @click="tosearch(item.name)">{{item.name}}</li>
          
        </ul>
      
      </div>

    </div>
    <!-- 搜索结果 -->
    <div class="result" v-if="showindex==4?true:false">
        <div class="daytitle" v-if="artistlist">
        <span>音乐人</span>
        <!-- <span class="iconfont icon-right_x"></span> -->
      </div>
        <div class="singerlist" >
        <div class="model" v-for="item in artistlist">
          <div class="modeltop">
            <img :src="item.picUrl" alt="" />
          </div>
          <div class="modelbottom">
            <span>
              {{ item.name }}
            </span>
          </div>
        </div>
      </div>
       <div class="daytitle" v-if="songresult">
        <span>歌曲</span>
        <!-- <span class="iconfont icon-right_x"></span> -->
      </div>
       <div class="songlist">
         <music :id="item.id" class="musicitem" v-for="item in songresult"></music>
        
       </div>
       <div class="songlist">
         <music :id="item.id" class="musicitem" v-for="item in alllist"></music>
        
       </div>
    </div>
  </div>
</div>
<!-- 框架屏 -->
<!-- 内容 -->

  
</template>

<script>
import { get } from "../../http/request";
import music from "../Small/music.vue"

export default {
components:{
  music
}
,
    data(){
        return{
           shanchu:false,

            singers: null,
        
            hotlist:null,

            historylist:null,

            suggestlist:null,

            list:null,

            searchlist:null,

            searchValue:'',

            hotlist:null,

            showindex:1,

            artistlist:null,

            songresult:null,

            alllist:null

        }
    },
    methods:{
      tosearch(item){
        this.searchValue=item
      }
      ,
     saveSwarchValue(){
            this.showindex=4

            if(this.searchValue.trim()!=''){

              this.historylist.push(this.searchValue)

                localStorage.setItem('historySearch',JSON.stringify(this.historylist))

                get(`/search/multimatch?keywords=${this.searchValue}`).then(res=>{

                  console.log(res);

                  this.artistlist=res.data.result.artist

                  this.songresult=res.data.result.playlist
                })

                get(`/search?keywords=${this.searchValue}`).then(res=>{

                  console.log(res);

                 this.alllist=res.data.result.songs

                })

            }
        }

      ,
      oninput(){
        if(this.searchValue.trim()!=''){
          this.showindex=3
        }else{
          this.showindex=2
        }
            if(this.showindex==3){

          // console.log('即将打印搜索建议');
 
          get(`/search/suggest?keywords=${this.searchValue}`).then(res=>{

            console.log(res);

            this.suggestlist=res.data.result.songs

            // console.log(this.suggestlist);

          }

          )
        }

      }
      ,
      clikinput(){
        
        console.log('clickinput');
        if(this.searchValue.trim()!=''){
          this.showindex=3
        }
        else {
          this.showindex=2
        }
      }
      ,
          blur(){
         console.log('失去焦点');
         if(this.searchValue==''){
           this.showindex=1
         }
    },
       smallFun(id){
      console.log('smallFun');
      this.$emit('getsong',id)

    },
           goPlayer(id){


    this.$router.push('/player/'+id)

    }
      ,
        nullFun(){

            this.searchValue=''

        },
        deletehistory(item){
            this.historylist=null

        },
        searchFun(keyword){
            console.log(keyword);
            if(keyword!=''){

                this.historylist.unshift(keyword);

                // console.log('this.history',this.historylist);

                localStorage.setItem('historySearch',JSON.stringify(this.historylist));

                this.isShow=false

                this.searchValue=keyword

                let url=`http://localhost:3000/search?keywords=${keyword}`

                axios.get(url).then(response=>{

                    
                    this.list=response.data.result.songs

                    // console.log(this.list);
                })
    
            }
            else{
               alert('搜索内容不能为空')
            }
            // console.log('search');
        }
    },
    watch:{
      showindex(newValue){

        if(newValue==3){

          console.log('即将打印搜索建议');
 
          get(`/search/suggest?keywords=${this.searchValue}`).then(res=>{

            console.log(res);

            this.suggestlist=res.data.result.songs

            console.log(this.suggestlist);

          }

          )
        }

      }
      ,
      searchValue(newValue){
        if(newValue.trim()==''){
          this.showindex=2
        }else if(newValue!=''){
          this.showindex=3
          this.$nextTick(()=>{
            this.$refs.input.focus()
          }

          )
          
        }
      }
    
    }
    ,
  mounted() {
   setTimeout(()=>{
      console.log(this.singers,this.hotlist,this.historylist,this.suggestlist,this.list,this.searchlist,this.hotlist,this.artistlist,this.songresult,this.alllist);

   },20000)
   
    this.historylist=JSON.parse(localStorage.getItem('historySearch'))

    this.historylist=[...new Set(this.historylist)]

     get("/top/artists?offset=0&limit=30").then((res) => {
      console.log("歌手数据", res);

      this.singers = res.data.artists;
    });
    // 获取热门搜索数据
    get('/search/hot').then(res=>{

      console.log('热门搜索数据',res);

      this.hotlist=res.data.result.hots

      // console.log(this.hotlist);
    })
    
    

    let url='/search/hot'
   
    get(url).then(response=>{

        console.log(response.data.result.hots);

        this.hotlist=response.data.result.hots

    })
  },
};
</script>

<style lang="scss">
@import url(../../comman/css/search.css);
</style>
